{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">{% endblock %}

{% block content %}
    <div id="middleBox" class="col-md-9 column "> <!消息展示区>
        <ul class="nav nav-pills nav-justified"><!--导航式式次导航-->
                <li class="active">
                     <a href="#" >消息<span class="badge col-badge col-badge-p">3</span></a><!--如果span内文字为空会自动叠起来-->
                </li>
                <li>
                     <a href="personal-center-update.html" >好友动态<span class="badge col-badge col-badge-p">3000+</span></a><!--如果span内文字为空会自动叠起来-->
                </li>
                <li >
                     <a href="#" >我的收藏</a><!--如果span内文字为空会自动叠起来-->
                </li>
                <li>
                     <a href="#" >我的发表</a><!--如果span内文字为空会自动叠起来-->
                </li>

            </ul>
        <!--按钮组式次导航-->
        <!--div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-warning">消息<span class="badge col-badge">3</span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">好友动态<span class="badge col-badge">300+</span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">我的收藏</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">我的发表</button>
            </div>
        </div-->
        <br>
        <div class="row row-mar-lgclearfix col-div"><!--新收到的评论展示-（话题与笔记的区别只在徽章颜色）-->
            <div class="media" style="margin:10px 10px 5px 10px">
                <a href="note.html" target=_blank style="text-decoration:none;color:black;">
                    <h4 class="col-h4">怎么学软件工程这门课？<span class="badge col-badge col-badge-n">笔记</span><!--span class="badge col-badge col-badge-t">话题</span--></h4>
                </a>
                <div class="row">
                        <a href="#" style="text-decoration:none;color:black" target=_blank><img src="{% static 'img/man2.png' %}"  class="profile-xs"/>用户A</a>
                        <label class="tool" style="margin:0 15px 0 15px">评论</label>

                        <a href="#" style="text-decoration:none;color:black" target=_blank><img src="{% static 'img/man2.png' %}"  class="profile-xs"/>用户B</a>
                        <p class="pull-right tool">2017-5-1</p> <!!!>
                </div>
            </div>
            <div class="sub-div sub-margin">
                 Music里华语歌排行，看起来大体还是挺正常的。前两年好好的啊，
                即使满大街放，甭管邓紫棋的泡沫也好，还是朴师傅的平凡之路、我本命的小幸运，周董告白气球这些，这里面最
                差的起码还有点营养，
                <a role="button" class="but-click btn tool" data-toggle="modal">
                    <span class="glyphicon glyphicon-pencil" ></span>评论
                </a>
                <!评论框>
                <div  class="remark-div" style="display:none" >
                    <textarea class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                    <button type="submit" class="btn btn-default publish">发表</button>
                </div>
            </div>
        </div>
        <div class="row row-mar-lg clearfix col-div"><!--新收到的点赞展示-（话题与笔记的区别只在徽章颜色）-->
            <div class="media" style="margin:10px 10px 5px 10px">
                <a href="#" style="text-decoration:none;color:black" target=_blank><img src="{% static 'img/man2.png' %}"  class="profile-xs"/>用户A</a>
                <label class="tool" style="margin:0 15px 0 15px">点赞了我的笔记</label>
                <a href="#" style="text-decoration:none;color:black" target=_blank>xxx笔记</a>
                <p class="pull-right tool">2017-5-1</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 column"> <!右部分>
        <div id="userInformation" class="row clearfix col-div">	<!用户信息（未登录前设其style="dispaly:none"）>
            <a class="btn big-but pull-left" href="#">
                <img alt="140x140" class="img" src="img/man2.png" width=50% style="margin-top:10px">
            </a>
            <h4 style="text-align:center">XXX</h4>
            <p style="color:gray;text-align:center">j简介……………………简介………………</p>
            <a class="btn big-but pull-left" href="information.html">个人信息</a>
            <a class="btn big-but pull-right" >退出登录</a>
        </div>
        <div class="row row-mar-lg clearfix col-div"> <!我关注用户>
            <h4 class="text-center col-h4">我关注用户</h4>
            <hr>
            <div class="right-div">
                <img src="img/2.jpg" width=40px height=40px/>
                <a href="#" class="right-text">用户A</a>
            </div>
        </div>
        <div class="row row-mar-lg clearfix col-div"> <!关注我用户>
            <h4 class="text-center col-h4">关注我用户</h4>
            <hr>
            <div class="right-div">
                <img src="img/2.jpg" width=40px height=40px/>
                <a href="#" class="right-text">用户A</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_script %}
<script>
// -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block"); 
			else
				div.css("display","none"); 
			//div[0].style.display = "block"; //设置div的style为可见
		});	
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value; 
			console.log(comment);
			if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{	
				div.css("display","none"); 
				alert("发表成功!");
			}
		});
	});

	
	
   
</script>
{% endblock %}
